// JavaScript Document

OpenLayers.Control.ToolArea = 
  OpenLayers.Class(OpenLayers.Control, {

	/**
     * APIProperty: id
     * {String}
     */
	 id:null,
    /**  
     * Property: displayContent
     * {FloatingDisplay}
     */
    displayContent: null,
	
	/**  
     * Property: areaControl
     * {OpenLayers.Control.Measure}
     */
   	 areaControl: null,
	 
	 /**  
     * Property: isActive
     * {boolean}
     */
   	 isActive: false,
		
	/** 
     * Size and initial positions for displayContent
     */
	displayTop: '10px',
	displayLeft: '60px',
	displayRight: '',
	displayWidth: '180px',
	displayHeight: '40px',
	 
    initialize: function(options) {
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
        this.id = OpenLayers.Util.createUniqueID();
    },
	
	 	
	/** 
     * Method: ignoreEvent
     * 
     * Parameters:
     * evt - {Event} 
     */
    ignoreEvent: function(evt) {
        OpenLayers.Event.stop(evt);
    },
	
	/** 
     * Method: mouseDown
     *
     * Parameters:
     * evt - {Event}
     */
    mouseDown: function(evt) {
        this.isMouseDown = true;
        this.ignoreEvent(evt);
    },

    /** 
     * Method: mouseUp
     *  
     * Parameters:
     * evt - {Event} 
     */
    mouseUp: function(evt) {
        if (this.isMouseDown) {
            this.isMouseDown = false;
            this.ignoreEvent(evt);
        }
    },

	 /** 
     * Method: activate
     */
    activate: function() {
    	 var idAux = this.id;
		 if (this.areaControl==null){

         	this.areaControl = new OpenLayers.Control.Measure(
            	  OpenLayers.Handler.Polygon, {
                	 persist: true
            	    }
	              );
			
        	this.areaControl.events.on({
                    "measure": function(event){
				        		var geometry = event.geometry;
				                var units = event.units;
				                var measure = event.measure;
				        		var element = document.getElementById("floatingDisplay-containerArea"+idAux+"");
				                out = "Area: " + measure.toFixed(3) + " " + units +"<sup>2</sup>";
				        		element.innerHTML = out;
				        	},
                    "measurepartial":function(event){
				        		var geometry = event.geometry;
				                var units = event.units;
				                var measure = event.measure;
				                var element = document.getElementById("floatingDisplay-containerArea"+idAux+"");
				                out = "Area: " + measure.toFixed(3) + " " + units +"<sup>2</sup>";
				        		element.innerHTML = out;
				        	}
            }); 
						
	     	this.map.addControl(this.areaControl);
		 }		 
		 this.areaControl.activate();
		 
		 
		 if (this.displayContent==null){
			var meassure = this.areaControl;
			var onclosefunction = function(){meassure.cancel(); meassure.deactivate(); this.isActive=false;};
			this.displayContent = new OpenLayers.Control.FloatingDisplay({title:'Areas', 
																  onClose:onclosefunction, 
																  top:this.displayTop,
																  left:this.displayLeft,
																  right:this.displayRight,
																  width:this.displayWidth,
																  height:this.displayHeight});
			this.map.addControl(this.displayContent);
		 }

		 //var content = '<div id="floatingDisplay-containerArea"></div>';
		 var content = '<div id="floatingDisplay-containerArea'+this.id+'"></div>';
		 this.displayContent.addContent(content);
  		 this.displayContent.show();		 
		 this.isActive=true;
	},
	
	deactivate: function(){
	  	this.displayContent.hide();
  	},
	/*
	handleMeasurements: function(event){
		var geometry = event.geometry;
        var units = event.units;
        var measure = event.measure;
		var element = document.getElementById('floatingDisplay-containerArea');
        out = "Area: " + measure.toFixed(3) + " " + units +"<sup>2</sup>";
		element.innerHTML = out;
	},*/
	
	CLASS_NAME: "OpenLayers.Control.ToolArea"

});